<template>
    <Header title="注册" />
    <div class="register">

        <table>
            <tr>
                <td>用户名：</td>
                <td>
                    <input class="user_name" v-model="user_name" />
                </td>
            </tr>
            <tr>
                <td>密  码：</td>
                <td>
                    <input type="password" class="user_pwd" v-model="pwd" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button @click="register">注册</button>
                    <button @click="toLogin">去登录</button>        
                </td>
               
            </tr>
        </table>
      
    
    </div>
  </template>
  
  <script setup lang="ts">
  import { reactive, toRefs } from "vue";
  import Header from "@/components/Header.vue";
  import { useRouter } from "vue-router";

  const router = useRouter()

  let data = reactive({
    user_name:'',
    pwd:''
  })

  const {user_name,pwd} = {...toRefs(data)}
  

  function toLogin(){
    router.push('./login')
  }
     
  function register(){
    //用户名不能重复
    if(localStorage.userInfo){
        const u = JSON.parse(localStorage.userInfo)
        if(u['user_name'] == user_name.value){
            alert('用户名已存在，请重新输入')
            return
        }
    }
    const user = {user_name:user_name.value,password:pwd.value} 
    localStorage.setItem('userInfo',JSON.stringify(user))

    alert('注册成功')
    
    router.push('./login')
    

  }
     
     
  </script>
  
  <style lang='less' scoped>
  .register {
    margin: 5px;
    font-size: 8px;
    
  }
  </style>